<template>
  <view class="container" v-if="!isLoading">
    <view class="news_cate" v-if="common.auditConfig.audit_on==0">
      <view class="nc_l" @tap="$xyfun.to('/pages/news/lists?id=1')">
        <view class="nc_l_tit">{{cates[0]}}</view>
        <view class="nc_l_desc">最新资讯
          <text class="yz-iconfont yz-jiantou ts-20"></text>
        </view>
        <image class="image" mode="widthFix" :src="$xyfun.image('/static/knowlege/book.png')"></image>
      </view>

      <view class="nc_r">
        <view class="nc_r_item" @tap="$xyfun.to('/pages/news/lists?id=2')">
          <view>
            <view class="nc_r_item_tit">{{cates[1]}}</view>
            <view class="nc_r_item_desc">最新资讯<text class="yz-iconfont yz-jiantou ts-20"></text></view>
          </view>
          <image class="image" mode="widthFix" :src="$xyfun.image('/static/knowlege/book2.png')"></image>
        </view>
        <view class="nc_r_item" @tap="$xyfun.to('/pages/news/lists?id=3')">
          <view>
            <view class="nc_r_item_tit">{{cates[2]}}</view>
            <view class="nc_r_item_desc">最新资讯<text class="yz-iconfont yz-jiantou ts-20"></text></view>
          </view>
          <image class="image" mode="widthFix" :src="$xyfun.image('/static/knowlege/book3.png')"></image>
        </view>
      </view>
    </view>

    <view class="crumb">
      <view class="crumb_tit">{{cates[3]}}</view>
      <view class="crumb_more" @tap="$xyfun.to('/pages/news/lists?id=4')">更多 ></view>
    </view>

    <view class="lists">
      <news-row v-for="(val,idx) in lists" :item="val"></news-row>
    </view>

    <view class="line_box">
      <view class="line" @tap="$xyfun.to('/pages/news/detail?id='+rule_id)">
        <view class="line_l">
          <image class="icon" mode="widthFix" :src="$xyfun.image('/static/knowlege/tu3.png')"></image>
          <view class="line_tit">平台规则</view>
        </view>
        <view class="line_r yz-iconfont yz-jiantou"></view>
      </view>
      <view class="line" @tap="$xyfun.to('/pages/news/detail?id='+agreement_id)">
        <view class="line_l">
          <image class="icon" mode="widthFix" :src="$xyfun.image('/static/knowlege/tu4.png')"></image>
          <view class="line_tit">隐私协议</view>
        </view>
        <view class="line_r yz-iconfont yz-jiantou"></view>
      </view>
    </view>

    <xy-tabbar />
  </view>
</template>

<script>
import { mapState } from 'vuex';
import xyTabbar from "@/components/xy-tabbar/index.vue";
import newsRow from "@/components/news/row.vue"

export default {
  components: {xyTabbar,newsRow},
  data() {
    return {
      isLoading : true,
      lists : [],
      cates : [],
      rule_id : '',
      agreement_id : ''
    }
  },
  computed: {
    ...mapState(['common'])
  },
  async onLoad() {
    this.loadData();
  },
  methods: {
    async loadData() {
      this.$api.postBase({
        url: 'news/index',
        loadingTip: '加载中...',
        data: {

        },
        success: res => {
          this.lists = res.lists;
          this.cates = res.cates;
          this.rule_id = res.rule_id;
          this.agreement_id = res.agreement_id;
          this.isLoading = false;
        }
      })
    }
  }
}
</script>

<style>
  page{
    background-color: #f9f9f9;
  }
</style>
<style lang="scss">
.container{
  padding-top: 40rpx;
  padding-bottom: 30rpx;
}
.news_cate{
  display: flex;
  justify-content: space-between;
  padding: 0 30rpx;
}

.nc_l{
  background-image: linear-gradient(to right, #6387fc,#456efc);
  width: 47.5%;
  border-radius: 10rpx;
  text-align: center;
  .nc_l_tit{
    color:#fff;
    text-align: center;
    padding-top: 60rpx;
    padding-bottom: 10rpx;
    font-size: 35rpx;
  }
  .nc_l_desc{
    color:#f1f1f1;
    font-size: 25rpx;
    padding-bottom: 30rpx;
    margin-right: 13rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    text{
      margin-left: 4rpx;
    }
  }
  .image{
    width: 80rpx;
    height: 80rpx;
  }

}

.nc_r{
  width: 47.5%;
  .nc_r_item{
    background-image: linear-gradient(to right, #71d9d3,#1dc5bb);
    padding-top: 20rpx;
    padding-bottom: 10rpx;
    margin-bottom: 30rpx;
    height: 140rpx;
    box-sizing: border-box;
    display: flex;
    border-radius: 10rpx;
    padding-left: 40rpx;
    .image{
      width: 60rpx;
      height: 60rpx;
      margin-left: 60rpx;
      margin-top: 20rpx;
    }

    .nc_r_item_tit{
      color: #fff;
      margin-bottom: 20rpx;
    }

    .nc_r_item_desc{
      color: #f1f1f1;
      font-size: 25rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      text{
        margin-left: 4rpx;
      }
    }
    &:nth-of-type(2){
      margin-bottom: 0;
      background-image: linear-gradient(to right, #74bcfe,#3da7fd);
    }
  }

}


.crumb{
  display: flex;
  justify-content: space-between;
  margin: 40rpx 20rpx -4rpx 20rpx;
  .crumb_tit{
    font-weight: bold;
    margin-left:20rpx;
    font-size: 36rpx;
  }
  .crumb_more{
    font-size:28rpx;
    margin-right: 20rpx;
  }
}

.lists{
  margin-bottom: 40rpx;
}


.line_box{
  border-radius: 40rpx;
  margin: 0 10rpx;
  overflow: hidden;
  .line{
    background-color: #ffffff;
    margin: 0 20rpx 0 20rpx;
    padding: 0 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .line_l{
      padding-top: 40rpx;
      padding-left: 20rpx;
      padding-bottom: 40rpx;
      display: flex;
      align-items: center;
      .icon{
        width: 30rpx;
        height: 30rpx;
        vertical-align: text-bottom;
      }

      .line_tit{
        margin-left:10rpx;
      }
    }
    .yz-iconfont{
      color: #aeaeae;
      float: right;
      font-size: 20rpx;
    }
  }
}


</style>
